<template>
    <div>
        <head-nav></head-nav>
        <div class="center">
            <div class="cent">
                <div class="cent-top">
                    核酸公告
                </div>
                <div class="cent-text">
                    <div class="notice" v-for="(item,index) in noticeList" :key="index" @click="goUrl(index)">
                        <img :src="item.src" alt="">
                        <div class="notice-text">
                            <div>{{item.title}}</div>
                            <div>{{item.time}}</div>
                        </div>
                    </div>
                </div>
                <div class="look-more" @click="goNoticeList">
                    查看更多<span class="el-icon-caret-right"></span>
                </div>
            </div>
        </div>
        <foot-nav></foot-nav>
    </div>
</template>

<script>
    import HeadNav from "@/components/HeadNav";
    import FootNav from "@/components/FootNav";
    export default {
        name: "CovInfoServe",
        components: {FootNav, HeadNav},
        data() {
            return {
                currentDate: new Date(),
                noticeList:[
                    {src:require('../../assets/img/101.jpg'),title:"10月30日惠城区开展全员核酸检测的公告",time:"2022-10-30 06:00:00",url:"/noticemore"},
                    {src:require('../../assets/img/101.jpg'),title:"10月30日惠城区开展全员核酸检测的公告",time:"2022-10-30 06:00:00",url:"/noticemore"},
                    {src:require('../../assets/img/101.jpg'),title:"10月30日惠城区开展全员核酸检测的公告",time:"2022-10-30 06:00:00",url:"/noticemore"},
                    {src:require('../../assets/img/101.jpg'),title:"10月30日惠城区开展全员核酸检测的公告",time:"2022-10-30 06:00:00",url:"/noticemore"},
                    {src:require('../../assets/img/101.jpg'),title:"10月30日惠城区开展全员核酸检测的公告",time:"2022-10-30 06:00:00",url:"/noticemore"},
                    {src:require('../../assets/img/101.jpg'),title:"10月30日惠城区开展全员核酸检测的公告",time:"2022-10-30 06:00:00",url:"/noticemore"},
                ]
            };
        },
        methods:{
            goUrl(id){
                this.$router.push({
                    path:`/noticemore/${id}`
                })
            },
            goNoticeList(){
                this.$router.push({path:'/noticelist'})
            }
        }
    }
</script>

<style scoped>
    *{
        padding: 0;
        margin: 0;
    }
    .center{
        padding: 20px 0;
    }
    .cent{
        margin: 0 auto;
        width: 1000px;
        min-height: 500px;
        background: white;
        border-radius: 10px;
        text-align: left;
        display: flex;
        flex-direction: column;
    }
    .cent-top{
        width: 800px;
        text-align: center;
        height: 50px;
        background: #3e8fba;
        color: white;
        line-height: 50px;
        margin: 10px auto;
    }
    .cent-text{
        width: 800px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .look-more{
        width: 150px;
        height: 50px;
        line-height: 50px;
        border: 1px solid lightgray;
        margin: 10px auto;
        text-align: center;
    }
    .notice{
        display: flex;
        border: 1px solid lightgray;
        width: 250px;
        height: 200px;
        margin: 10px 0;
    }
    .notice img{
        width: 100px;
    }
    .notice-text{
        padding: 15px 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 13px;
    }

</style>